<template>
  <div id="chart">
    <h1>课堂总体质量识别结果</h1>
    <el-card shadow="always">
      <div id="pie">
        <div id="pieExpression" class="pie"></div>
        <div id="pieAttitude" class="pie"></div>
      </div>
    </el-card>
    <el-card shadow="always">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column
          prop="class"
          label="班级"
          width="130"
        ></el-table-column>
        <el-table-column
          prop="people"
          label="识别人数"
          width="130"
        ></el-table-column>
        <el-table-column
          prop="seatRate"
          label="前三排就坐率"
          width="130"
        ></el-table-column>
        <el-table-column
          prop="head"
          label="抬头率"
          width="130"
        ></el-table-column>
        <el-table-column
          prop="satisfied"
          label="满意度"
          width="130"
        ></el-table-column>
        <el-table-column
          prop="participete"
          label="参与度"
          width="130"
        ></el-table-column>
        <el-table-column
          prop="doubt"
          label="疑难度"
          width="130"
        ></el-table-column>
        <el-table-column
          prop="follow"
          label="关注度"
          width="130"
        ></el-table-column>
        <el-table-column prop="all" label="综合评价"></el-table-column>
      </el-table>
      <div id="bar-box">
        <div id="bar"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      tableData: [
        {
          class: '计算机1班',
          seatRate: '90%',
          head: '89%',
          satisfied: '63%',
          people: 35,
          participete: '82%',
          doubt: '14%',
          follow: '70%',
          all: '0.8'
        },
        {
          class: '计算机2班',
          seatRate: '87%',
          head: '92%',
          satisfied: '62%',
          people: 35,
          participete: '80%',
          doubt: '12%',
          follow: '71%',
          all: '0.82'
        },
        {
          class: '计算机3班',
          seatRate: '95%',
          head: '79%',
          satisfied: '59%',
          people: 35,
          participete: '84%',
          doubt: '13%',
          follow: '71%',
          all: '0.78'
        },
        {
          class: '计算机4班',
          seatRate: '98%',
          head: '80%',
          satisfied: '59%',
          people: 35,
          participete: '86%',
          doubt: '15%',
          follow: '75%',
          all: '0.85'
        }
      ]
    }
  },
  methods: {
    getPieExpression() {
      const pieExpression = echarts.init(
        document.getElementById('pieExpression')
      )
      /** @type EChartsOption */
      const optionExpressionPie = {
        title: {
          text: '表情识别总体统计',
          textStyle: {
            color: 'blue',
            fontSize: '20'
          },
          left: 'center',
          subtext: 'Expression recognition results'
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: { orient: 'vertical', left: 'left' },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        series: [
          {
            name: '表情识别结果',
            type: 'pie',
            radius: '50%',
            label: {
              formatter: '{b}: {c}({d}%)'
            },
            data: [
              { value: 74, name: '😀' },
              { value: 20, name: '😮' },
              { value: 4, name: '😭' },
              { value: 4, name: '🤬' },
              { value: 2, name: '🤢' },
              { value: 4, name: '😨' },
              { value: 16, name: '😦' },
              { value: 18, name: '😐' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      pieExpression.setOption(optionExpressionPie)
    },
    getPieAttitude() {
      const pieAttitude = echarts.init(document.getElementById('pieAttitude'))
      /** @type EChartsOption */
      const optionAttitudePie = {
        title: {
          text: '姿态识别结果',
          textStyle: {
            color: 'blue',
            fontSize: '20'
          },
          subtext: 'Attitude recognition results',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: { orient: 'vertical', left: 'left' },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        series: [
          {
            name: '姿态识别结果',
            type: 'pie',
            radius: '50%',
            label: {
              formatter: '{b}: {c}({d}%)'
            },
            data: [
              { value: 86, name: '正常听讲' },
              { value: 10, name: '举手' },
              { value: 30, name: '书写' },
              { value: 4, name: '站立' },
              { value: 10, name: '俯身' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      pieAttitude.setOption(optionAttitudePie)
    },
    getCharts() {
      const myChart = echarts.init(document.getElementById('bar'))
      /** @type EChartsOption */
      const option = {
        title: {
          text: '综合评价排序',
          textStyle: {
            color: 'blue',
            fontSize: '20'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['计算机4班', '计算机2班', '计算机1班', '计算机3班'],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#999'
          }
        },
        series: [
          {
            data: [0.85, 0.82, 0.8, 0.78],
            type: 'bar',
            // 柱子宽度
            barWidth: '50%',
            itemStyle: {
              color: '#0098dd'
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  },
  mounted() {
    this.getPieExpression()
    this.getPieAttitude()
    this.getCharts()
  }
}
</script>

<style lang="less" scoped>
#chart {
  h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
}
.el-card {
  // margin-top: 30px;
  #pie {
    display: flex;
    justify-content: space-around;
    .pie {
      height: 600px;
      width: 600px;
    }
  }
}
#bar-box {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
#bar {
  height: 600px;
  width: 600px;
  margin-top: 20px;
}
</style>
